<template>
  <div class="steps-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>
        <d-switch-list v-model="contentLayout" :datas="['vertical', 'transverse']"></d-switch-list>&nbsp;
        <d-button-group size="s">
          <d-button icon="d-icon-plus" @click="step>=3 || step++"></d-button>
          <d-button icon="d-icon-minus" @click="step<=0 || step--"></d-button>
        </d-button-group>
      </p>
      <d-steps :datas="data" :step="step" :contentLayout="contentLayout"></d-steps>
    </div>
    <h3 class="title">自定义Icon，说明</h3>
    <p>
      <d-button-group size="s">
        <d-button icon="d-icon-plus" @click="step>=3||step++"></d-button>
        <d-button icon="d-icon-minus" @click="step<=0||step--"></d-button>
      </d-button-group>
    </p>
    <d-steps :datas="data2" :step="step"></d-steps>
    <h5 class="sub-title">slot, icon,title, desc</h5>
    <d-steps :datas="data2" :step="step" contentLayout="transverse">
      <template v-slot:icon>
        <d-circle :percent="80" color="#45b984" :stroke-width="4" :size="30">
          <div v-font="13">3/4</div>
        </d-circle>
      </template>
      <template v-slot:title="{item, index}">
        <div>{{item.title}}</div>
        <div>{{index}}</div>
      </template>
      <template v-slot:desc>Description</template>
    </d-steps>
  </div>
</template>

<script>
export default {
  name: 'stepsDemo',
  data () {
    return {
      contentLayout: 'vertical',
      data: [
        { key: 'a', title: 'step1', desc: 'step1 Description' },
        { key: 'b', title: 'step2', desc: 'step2 Description' },
        { key: 'c', title: 'step3', desc: 'step3 Description' },
        { key: 'd', title: 'step4', desc: 'step4 Description' }
      ],
      data2: [
        { key: 'a', title: 'step1', icon: 'd-icon-home', desc: 'step1 Description' },
        { key: 'b', title: 'step2', icon: 'd-icon-user', desc: 'step2 Description' },
        { key: 'c', title: 'step3', icon: 'd-icon-star-on', desc: 'step3 Description' },
        { key: 'd', title: 'step4', icon: 'd-icon-complete', desc: 'step4 Description' }
      ],
      step: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
// .steps-demo
</style>
